<!--
* description: 展车订单配置-编辑
* author: wangjuan
* createdDate:
-->
<template>
  <section class="editBelowOrdCar">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="textMap[popupsState]"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            :options="comp.options"
            :o-fields="comp.oFields"
            :custom-obj="comp.customObj"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          :fixed="true"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import api from '@/api/belowInfo'
// import { orgApis } from '@/api/apiList/org'

export default {
  components: {
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    dialogHeader: () => import('@/components/dialogHeader'), // 弹窗标题
    mixButton: () => import('@/components/basicComponent/mixButton')
  },
  // 组件混入对象
  mixins: [formMixins],
  props: {
    popupsState: {
      type: String,
      default: ''
    }
  },

  data() {
    const viewPageCode = 'belowOrdCar-edit'
    return {
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          icon: 'iconfont icon-preservation',
          clickEvent: () => this.save(),
          text: this.$t('sys.button.save') /* 保存*/,
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          icon: 'iconfont icon-cancel',
          clickEvent: () => this.closeEdit(),
          text: this.$t('sys.button.cancel') // 取消
        }
      ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '订单号：',
              codeField: 'saleOrderCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '交付门店：',
              codeField: 'deliveryDlrId',
              oFields: 'deliveryDlrId,deliveryDlrFullName',
              customObj: {
                api: api.ListOfDeliveryStoreContent
              },
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '展车门店：',
              codeField: 'dlrShortName',
              textField: 'dlrId',
              component: () => import('@/views/ve/salesStore/below.vue'),
              isMust: true
            },
            {
              compKey: 'compKey7',
              labelName: '车系：',
              codeField: 'carSeriesId',
              oFields: 'carSeriesId,carSeriesCn',
              customObj: {
                api: api.listOfCarSeries
              },
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey8',
              labelName: '基础车型：',
              codeField: 'carConfigId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carConfigId,carConfigCn',
              parentFileds: 'value:carSeriesId',
              customObj: {
                listQuery: { carSeriesId: '' },
                api: api.queryCarType
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey9',
              labelName: '选装包：',
              codeField: 'optionalPagId',
              component: () => import('@/components/org/commonSelect'),
              parentFileds: 'value:carConfigId',
              oFields: 'optionalPagId,optionalPagName',
              customObj: {
                api: api.queryCarOptionalPagLinkMessage,
                listQuery: {
                  carConfigId: ''
                }
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey10',
              labelName: '车身颜色：',
              codeField: 'carColorId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carColorId,carColorName',
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                api: api.queryCarColorLinkMessage
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey11',
              labelName: '内饰颜色：',
              codeField: 'carIncolorId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carIncolorId,carIncolorName',
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                api: api.queryCarInColorLinkMessage
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey12',
              labelName: '备注：',
              codeField: 'remark',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 24
            }
          ],

      // 标题
      textMap: {
        edit: '编辑'
      },
      // 表单数据（无需赋值，由混入对象赋值）
      formField: {
        saleOrderCode: '',
        saleOrderId: '',
        updateControlIdD: '',
        deliveryDlrId: '',
        dlrId: '',
        carSeriesId: '',
        carConfigId: '',
        optionalPagId: '',
        carColorId: '',
        carIncolorId: '',
        dlrShortName: '',
        remark: ''
      }
    }
  },
  watch: {
    'formField.carSeriesId': {
      handler(val) {
        if (!val) {
          this.formField.carConfigId = ''
        }
      }
    },
    'formField.carConfigId': {
      handler(val) {
        if (!val) {
          this.formField.optionalPagId = ''
          this.formField.carColorId = ''
          this.formField.carIncolorId = ''
        }
      }
    }
  },
  methods: {
    // 关闭弹窗
    // handleClose(done) {
    //   this.$confirm('还未保存，确认关闭窗口？')
    //     .then(_ => {
    //       this.$emit('update:popupsVisible', false)
    //       done()
    //     }).catch(_ => {})
    // },
    closeEdit(type) {
      this.$emit('closeEdit', type)
    },
    // 保存
    save() {
      this.$requestAPI({
        apiUrl: api.updateExhibitionCarOrder.APIUrl,
        variables: { ...this.formField }
      }).then(res => {
        this.$emit('refresh')
        this.curPopupsVisible = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.promptSpan{
  position: absolute;
    bottom: 26px;
    right: 335px;
    color: #e70020;
}
</style>
